<template>
  <div class="seckill">
    <div class="first">
      <div class="left">
        <span>嗨购秒杀</span>
        <span class="time">14点场</span>
        <CountdownCom />
      </div>
      <div class="boom">
        爆款轮番秒 <span class="righticon"><van-icon name="arrow" /></span>
      </div>
    </div>
    <div class="second-box">
      <div
        class="second"
        v-for="(item, index) in this.$store.state.seckillm.linkdata1"
        :key="index"
        @click="goDetail(item.proid)"
      >
        <div class="pic-s">
          <img :src="item.img1" alt="" />
        </div>
        <div class="price">¥{{ item.originprice }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CountdownCom from "@/components/CountdownCom";
export default {
  data() {
    return {
      proid: this.$route.params.proid,
    };
  },
  created() {
    this.$store.dispatch("LINK_DATA_AA");
  },
  components: {
    CountdownCom,
  },
  methods: {
    goDetail(proid) {
      this.$router.push({
        name: "detailview",
        params: {
          proid: proid,
        },
      })
      console.log(this.proid);
    },
  },
};
</script>

<style lang="scss" scoped>
.seckill {
  background-color: #fff;
  border-radius: 0.4444rem;
  margin: 0.5556rem;
  font-size: 0.7222rem;
}
.first {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  display: flex;
  align-items: center;
  padding: 0 0.1667rem;
}
.time {
  color: rgb(255, 103, 103);
  margin-left: 0.4444rem;
  margin-right: 0.2778rem;
}
.righticon {
  background-color: rgb(255, 103, 103);
  font-size: 0.8333rem;
  color: #fff;
  border-radius: 50%;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.4444rem;
}
.first {
  padding: 0.1667rem 0.4444rem;
}
.boom {
  color: rgb(255, 103, 103);
}
.first .left div:nth-child(2) > span {
  color: #fff;
  border-radius: 50%;
}
.second-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5556rem;
}
.second {
  width: 3.1111rem;
  text-align: center;
  margin-top: 0.4444rem;
}
.pic-s {
  width: 3rem;
}
.pic-s img {
  width: 100%;
  height: 3rem;
  display: block;
  margin: 0 auto;
}
.price {
  text-align: center;
  color: rgb(255, 103, 103);
  font-weight: bold;
  margin: 0.4444rem 0;
}
</style>